<script setup>
import {ref} from 'vue'

const data = ref({
  arr: [
    {id: '1', name: '肥龙', web: '18', date: '上海市'},
    {id: '2', name: '赖灿', web: '19', date: '北京市'},
    {id: '3', name: '肥牛', web: '20', date: '南宁市'},
    {id: '4', name: '甘帅', web: '18', date: '南宁市'}
  ]
})

//选中的复选框
let idArr = []
const selected = (data) => {
  //console.log("selected", data)

  idArr = [] //重置

  data.forEach((value) => {
    idArr.push(value.id)
  })

  console.log("idArr:", idArr)
}

//删除
const del = () => {
  console.log("del:", idArr)
}

//编辑
const edit = (index, row) => {
  console.log("index:", index, "row:", row)
}
</script>

<template>

  <h3>欢迎，管理员！</h3>
  <router-link to="/demo1"><el-button>返回登录</el-button></router-link>
  <hr>
<!--  <el-button type="primary">新建用户</el-button>-->
  <el-button @click="dialog = true" type="primary">新建用户</el-button>
  <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">

  </el-dialog>
  <el-table :data="data.arr" @selection-change="selected" border style="width: 900px;margin: 3px 0;">
    <el-table type="selection" width="55"></el-table>

<!--    <el-table-column prop="id" label="编号" width="80"/>-->
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="web" label="年龄" width="300"/>
    <el-table-column prop="date" label="地址"/>

    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button>编辑</el-button>
        <el-button size="small" type="danger">删除</el-button>

      </template>
    </el-table-column>
  </el-table>


</template>

<style scoped>

</style>